<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Insert title here</title>
	<style type="text/css" media="screen">
	.slot {
		background: #333;
		width: 90px;
		height: 110px;
		display: block;
	}
	.slotActive{
		background-color: yellow;
		width: 90px;
		height: 110px;
		display: block;
	}
	</style>
	<script type="text/javascript">
			function handleDrop(event, ui) {
				ui.draggable.fadeOut(function() {$(this).fadeIn();});

				$(this).droppable('disable');
			}
		</script>
</h:head>
<body>
	<h:form prependId="false">

		<p:growl id="growl" showDetail="true" />

		<h:panelGrid columns="3" columnClasses="lineup,squad">

			<p:panel header="Squad">
				<p:dataGrid id="availablePlayers" value="#{barcelona.players}"
					var="player" columns="4">
					<p:column>
						<p:graphicImage id="player" value="/img/#{player.photo}"
							styleClass="playerImage" />
						<p:draggable for="player" revert="true" 
							stack=".playerImage" />
					</p:column>
				</p:dataGrid>
			</p:panel>
			

			<h:panelGroup>
				<h:panelGrid columns="3" style="margin-left:40px;">
					<p:outputPanel id="LF" styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop" datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>

					<p:outputPanel id="CF" styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop" datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>

					<p:outputPanel id="RF" styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop" datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>
				</h:panelGrid>

				<h:panelGrid columns="3" style="margin-left:40px;">
					<p:outputPanel id="LCM" styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop"
							datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>

					<p:outputPanel id="DM" styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop"
							datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>

					<p:outputPanel id="RCM" styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop"
							datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>
				</h:panelGrid>

				<h:panelGrid columns="4">
					<p:outputPanel id="LB" styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop" datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>

					<p:outputPanel id="CB1" styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop" datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>

					<p:outputPanel id="CB2" styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop" datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>

					<p:outputPanel id="RB" styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop" datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>
				</h:panelGrid>

				<h:panelGrid columns="1" style="margin-left:120px;">
					<p:outputPanel id="GK" styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop"
							datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>
				</h:panelGrid>
			</h:panelGroup>


<p:panel header="Squad">
			<h:panelGroup>
				<h:panelGrid columns="4" style="margin-left:40px;">
					<p:outputPanel styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop" datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>

					<p:outputPanel styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop" datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>

					<p:outputPanel styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop" datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>
					
					<p:outputPanel styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop" datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>
				</h:panelGrid>

				<h:panelGrid columns="4" style="margin-left:40px;">
					<p:outputPanel styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop"
							datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>

					<p:outputPanel styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop"
							datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>

					<p:outputPanel styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop"
							datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>
					
					<p:outputPanel styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop"
							datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>
				</h:panelGrid>

				<h:panelGrid columns="4" style="margin-left:40px;">
					<p:outputPanel styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop" datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>

					<p:outputPanel styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop" datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>

					<p:outputPanel styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop" datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>

					<p:outputPanel styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop" datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>
				</h:panelGrid>

				<h:panelGrid columns="4" style="margin-left:40px;">
					<p:outputPanel styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop"
							datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>
					
					<p:outputPanel styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop"
							datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>
					
					<p:outputPanel styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop"
							datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>
					
					<p:outputPanel styleClass="slot">
						<p:droppable tolerance="fit" activeStyleClass="slotActive"
							onDrop="handleDrop"
							datasource="availablePlayers">
							<p:ajax listener="#{barcelona.onDrop}"
								update="selectedPlayers growl" />
						</p:droppable>
					</p:outputPanel>
				</h:panelGrid>
			</h:panelGroup>
</p:panel>

		</h:panelGrid>

		<p:panel header="Squad">
			<p:dataList value="#{barcelona.selectedPlayers}" var="player"
				id="selectedPlayers">  
            #{player.number} - #{player.name}  
        </p:dataList>
		</p:panel>

	</h:form>
</body>
</html>